<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>供应商集合</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/statics/layui/css/layui.css"  />
</head>
<body>
<form class="layui-form" action="">
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">供货商姓名：</label>
            <div class="layui-input-block">
                <input class="layui-input" name="supContact" id="supContact" autocomplete="off">
            </div>
        </div>
        <div class="layui-inline">
            <div class="layui-input-block">
                <button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1">搜索</button>
            </div>
        </div>
    </div>
</form>
<table class="layui-hide" id="test" lay-filter="test"></table>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="view">查看</a>
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="add">添加</button>
    </div>
</script>
<script src="${pageContext.request.contextPath}/statics/layui/layui.js" type="text/javascript"></script>
<script>
    layui.use(['table','form','jquery'], function () {
        var table = layui.table;
        var form=layui.form;
        var $=layui.$;
        var tableIns = table.render({
            elem: '#test'
            , url: '${pageContext.request.contextPath}/supplier/List'
            ,toolbar: "#toolbarDemo"
            , cols: [[
                {field: 'supCode', width: 150, title: '供货商编号'}
                , {field: 'supName', width: 150, title: '供货商名称'}
                , {field: 'supDesc', width: 150, title: '供货商描述'}
                , {field: 'supContact', width: 150, title: '供货商联系人'}
                , {field: 'supPhone', title: '联系电话', width: 150}
                , {field: 'supAddress', width: 150, title: '供货商地址', sort: true}
                , {field: 'supFax', width: 150, title: '传真'}
                , {field: 'createdUserId', width: 60, title: '创建人ID'}
                ,{fixed: 'right', title:'操作', width: 170, minWidth: 170, toolbar: '#barDemo'}
            ]]
            , page: true
        });
        //监听提交
        form.on('submit(demo1)', function (data) {
            console.log(data.field.supContact)
            //这里以搜索为例
            tableIns.reload({
                where: { //设定异步数据接口的额外参数，任意设
                    supContact: data.field.supContact
                    //…
                }
                , page: {
                    curr: 1 //重新从第 1 页开始
                }
            });
            return false;
        });

        //触发单元格工具事件
        table.on('tool(test)', function(obj){ // 双击 toolDouble
            var data = obj.data;
            console.log(obj)
            console.log(data.supCode)
            if(obj.event === 'view'){
                window.open('view/'+data.id)
            } else if(obj.event === 'del'){
                layer.confirm('真的删除行么', function(index){
                    //发送请求
                    $.get('delete/'+data.id,function (data){
                        //关闭提示框
                        layer.close(index);
                        if (data==="1"){
                            layer.alert("删除成功")
                            obj.del()
                        }else{
                            layer.alert("删除失败")
                        }
                    })
                });
            } else if(obj.event === 'edit'){
                console.log(data.id)
                window.open("${pageContext.request.contextPath}/supplier/update/"+data.id)
            //           '<form action="supplier/update" method="post">'+
            //               '<div style="padding: 16px;">供应商编号&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;：<input type="text" name="supCode" value="'+data.supCode+'"></div>'+
            //               '<div style="padding: 16px;">供应商名称&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;：<input type="text" name="supName"  value="'+data.supName+'"></div>'+
            //               '<div style="padding: 16px;">供应商详情&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;： <input type="text" name="supDesc"  value="'+data.supDesc+'"></div>'+
            //               '<div style="padding: 16px;">供应商联系人&nbsp;&nbsp;&nbsp;：<input type="text" name="supContact"  value="'+data.supContact+'"></div>'+
            //               '<div style="padding: 16px;">供应商联系电话：<input type="text" name="supPhone"  value="'+data.supPhone+'"></div>'+
            //               '<div style="padding: 16px;">供应商地址 &nbsp;&nbsp;&nbsp;：<input type="text" name="supAddress"  value="'+data.supAddress+'"></div>'+
            //               '<div style="padding: 16px;">传 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;真&nbsp;&nbsp;&nbsp;：<input type="text" name="supFax"  value="'+data.supFax+'"></div>'+
            //               '<div style="padding: 16px;">创建人ID&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;：<input type="text" name="createdUserId"  value="'+data.createdUserId+'"></div>'+
            //               '<div style="padding: 16px;"><input type="submit"  value="修改"></div>'+
            // '       </form>'
            }
        });


        //触发事件
        table.on('toolbar(test)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id);
            switch(obj.event){
                case 'add':
                    window.open("toadd")
                    break;
            }
        });
    });
</script>

</body>
</html>
